<template>
  <div class="fix">
    <div class="header">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>物业服务</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/RepairManagement' }"
          >报修管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/home/DetailsOfRepair' }">
          报修详情
        </el-breadcrumb-item>
      </el-breadcrumb>
      <h1>报修详情</h1>
    </div>
    <div class="middle">
      <p>维修流程</p>
      <el-steps :active="2" align-center>
        <el-step title="提交维修信息" description="提交成功" />
        <el-step title="审核中" description="物业审核中" />
        <el-step title="维修指派" description="指派维修人员" />
        <el-step title="完成维修" description="填写维修记录" />
      </el-steps>
    </div>

    <div class="bottom">
      <p>报修信息 <span>编辑</span></p>

      <el-form :model="formInline" class="demo-form-inline">
        <div>
          <el-form-item label="报修房屋" width="200px">
            南航碧桂园小区01栋2单元402
          </el-form-item>
          <el-form-item label="问题描述"> {{}} </el-form-item>
          <el-form-item label="报修人"> 蒋锋 住户详情 </el-form-item>
          <el-form-item label="附件"> {{}} </el-form-item>
        </div>
        <div>
          <el-form-item label="维修项目"> 水暖-浴霸 </el-form-item>
          <el-form-item label="手机号码"> 16589000078 </el-form-item>
          <el-form-item label="预约日期"> 2022/09/09 </el-form-item>
        </div>
        <div>
          <el-form-item label="标题"> 浴霸没有水 </el-form-item>
          <el-form-item label="提交时间"> 2019-09-09 10:40 </el-form-item>
          <el-form-item label="提交人"> 林莉莉 </el-form-item>
        </div>
      </el-form>
    </div>

    <div class="footer">
      <p>审核</p>
      <div>
        <el-form-item label="审核意见" prop="desc">
          <el-input type="textarea" />
        </el-form-item>
      </div>
      <div class="foo">
        <el-button type="primary">审核通过</el-button>
        <el-button type="primary">审核不通过</el-button>
        <el-button>返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useStore from '../../../store/index';
import { useRoute } from 'vue-router';
import { onMounted, reactive, ref } from 'vue';
import {
  ElBreadcrumb,
  ElBreadcrumbItem,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElStep,
  ElSteps,
} from 'element-plus';
const store = useStore();
const route = useRoute();
const formInline = reactive({
  user: '',
  region: '',
});
interface User {
  id: number;
  house: { id: number; room: string; name: string; type: string };
  secondItem: {
    id: number;
    secondItemType: string;
    repairProject: { secondItemId: number; maintenanceItemType: string };
  };
  title: string;
  detail: string;
  phone: string;
  orderDate: string;
  problemAttachment: string;
  repairState: { id: number; repairState: string };
  auditMind: null;
  communityId: number;
}
let id = ref();
let tableData = ref<User[]>([]);
let detail = ref();
onMounted(() => {
  id.value = route.params.id;
  // tableData.value.forEach((v: User) => {
  //   if (v.id == id.value) {
  //     detail.value = v;
  //   }
  // });
});
</script>

<style lang="less" scoped>
.fix {
  height: 100%;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  .header {
    width: 1136px;
    background: white;
    height: 100px;
    margin: 20px 0;
    .el-breadcrumb {
      height: 37px;
      line-height: 37px;
      font-size: 14px;
      margin-left: 30px;
      :deep(.el-breadcrumb__item:nth-child(1) .el-breadcrumb__inner) {
        color: #aaadb4;
      }
      :deep(.el-breadcrumb__item:nth-child(2) .el-breadcrumb__inner) {
        color: #aaadb4;
      }
    }
    h1 {
      height: 60px;
      line-height: 60px;
      margin-left: 30px;
      font-family: 'Microsoft Tai Le Bold', 'Microsoft Tai Le', sans-serif;
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
    }
  }
  .middle {
    width: 1136px;
    background: white;
    height: 195px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    p {
      margin: 30px 0 20px 40px;
    }
  }

  .bottom {
    width: 1136px;
    background: white;
    height: 300px;
    margin-bottom: 20px;

    p {
      margin: 20px 40px;
    }
    :deep(.el-form) {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
  }
  .footer {
    width: 1136px;
    background: white;
    height: 250px;
    margin-bottom: 20px;
    p {
      margin: 20px 40px;
    }
    div {
      margin: 0 20px;
      :deep(.el-textarea__inner) {
        width: 350px;
        height: 100px;
      }
    }
    .foo {
      margin: 20px 30px;
      :nth-child(2) {
        background: #f46363;
        border: none;
      }
    }
  }
}
</style>
